<template>
    <div :style="boxPadding">
        <components
            v-for="(item,idx) in items"
            :key="idx"
            :is="item.type"
            :tid="item.tid"
            :shortIndex="short_index"
            :content="item.content"
            :appearance="item.appearance">
        </components>
    </div>
</template>

<script>
    import {getDetail} from '@/api/api.js'
    import components from '@/components/index.js'
    import Stats from '@/components/bricks/stats.js'

    export default {
        name: 'Page',
        components: {
            ...components
        },
        data() {
            return {
                id: this.$route.params.id,
                pageTitle: document.title,
                shareConfig: {
                    share_description: '',
                    share_icon: '',
                    share_title: ''
                },
                items: [],
                short_index: '',
                boxPadding: 'padding-top: 0px; padding-bottom: 0px;'
            }
        },
        created() {
            this.getDetail()
        },
        watch: {
            pageTitle(newVal) {
                document.title = newVal
            }
        },
        methods: {
            getDetail() {
                let short_index = this.id
                getDetail({short_index}).then(res => {
                    if (res.code === 4000004) {
                        alert('当前页面已过期！')
                    }
                    if (res.code === 0) {
                        let nData = res.data

                        if (res.data.status === '5') {
                            Stats.sendRequest('h5_load', nData.short_index)
                        }

                        this.short_index = nData.short_index
                        this.pageTitle = nData.title
                        this.shareConfig.share_description = nData.share_description
                        this.shareConfig.share_icon = nData.share_icon
                        this.shareConfig.share_title = nData.share_title
                        this.items = nData.pages[0] && nData.pages[0].hmp

                        // 设置定位组件后的padding
                        this.setStyle();
                    }
                })
            },
            setStyle() {
                let tops = [0];
                let bottoms = [0];

                for (let brick of this.items) {
                    switch (brick.type) {
                            case 'YXDownloadButton':
                            case 'YXPhone':
                                if (brick.appearance.effect.value === 'top' || brick.appearance.effect.value === 'bottom') {
                                    let _h = brick.appearance.base.height + brick.appearance.padding.top + brick.appearance.padding.bottom;
                                    if (brick.appearance.effect.value === 'top') {
                                        tops.push(_h);
                                    } else if (brick.appearance.effect.value === 'bottom') {
                                        bottoms.push(_h);
                                    }
                                }
                                break;
                            case 'YXWeChat':
                                if (brick.appearance.effect.value === 'top') {
                                    tops.push(46);
                                } else if (brick.appearance.effect.value === 'bottom') {
                                    bottoms.push(46);
                                }
                                break;
                    }
                }

                this.boxPadding = `padding-top: ${Math.max.apply(null, tops)}px; padding-bottom: ${Math.max.apply(null, bottoms)}px;`;
            }
        }
    }
</script>

<style scoped lang="scss">
    div {

    }
</style>
